<!-- 农机选择 -->
<template>
	<view>
		<view class="container" v-if="showFlag">
			<view class="left">
				<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - 70 + 'px'}"
					@scrolltolower="handleScrolltolowerone()">
					<view class="tab">
						<view class="item" v-for="(item,index) in tabList" :key="index" @click="selectItem(item.id)"
							:class="activeId === item.id ? 'activeItem' : ''">
							{{item.equipmentTypeName}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - 70 + 'px'}">
					<view class="item" v-for="(item,index) in newEquipmentList" :key="index">
						<view class="top" @click="goOrder(item)">
							<view class="img">
								<image src="../../../../../../static/play.svg" mode=""></image>
							</view>
							<view class="describle">
								<view class="name">
									{{item.equipmentName}}
								</view>
								<view class="day">
									起租天数：{{item.leaseDayNum}}天
									
								</view>
							</view>
						</view>
						<view class="bottom" @click="goInfo(item)">
						<view class="info">
							<image src="@/static/xq.png" style="width:15px;height: 15px; padding: 2px 5px 0 0;"></image>
							<p>农机详情</p>
						</view>
						<u-icon name="arrow-right" color="#0480FB" size="28"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup class="popUp" :show="showPop" :round="10" mode="bottom" width="100%" height="100%" :closeable="false"
			@close="showPop=false">
			<view class="popUpOperate">
				<view class="center">
					农机详情
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{height:setcollapseheight() - 130 + 'px'}" style="margin-top: 10rpx;">
				<view class="popTop" @click="popConfirm()">
					<view class="first" v-if="equipmentInfo.pic">
						<image :src="equipmentInfo.pic" mode=""></image>
					</view>
					<view class="first" v-else>
						<view class="popItemTop">
							<template v-if="nowEquipmentName.includes('旋')">
								<image src="@/static/machinery/xuangeng.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('拖拉')">
								<image src="@/static/machinery/tuola.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('打捆')">
								<image src="@/static/machinery/dakun.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('插秧')">
								<image src="@/static/machinery/chayang.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('洒肥')">
								<image src="@/static/machinery/safei.png" mode=""></image>
							</template>
							<template v-else>
								<image src="@/static/machinery/shouge.png" mode=""></image>
							</template>
						</view>
					</view>
					<view class="tip">
						*图片仅供参考，以实际农机为准
					</view>
					<view class="title">
						{{equipmentInfo.equipmentName}}
					</view>
				</view>
				<view class="gray"></view>
				<view class="popBottom">
					<view class="title">
						农机资料
					</view>
					<view class="info">
						农机型号：{{equipmentInfo.deviceTypeName}}
					</view>
					<view class="info">
						农机价格：{{equipmentInfo.unitPrice}}
					</view>
					<view class="info">
						起租天数：{{equipmentInfo.leaseDayNum}}天起租
					</view>
					<view class="info">
						取车地点：{{equipmentInfo.stationInfo}}
					</view>
					<view class="info">
						联系人：{{equipmentInfo.serviceName}}
					</view>
					<view class="info">
						取车联系电话：{{equipmentInfo.servicePhone}}
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/user/selectAnchor/index.js'
	export default {
		data() {
			return {
				tabList: [],
				activeId: '',
				svcClassId: '',
				serviceProjectNo: '',
				page: 1,
				size: 10,
				total: 0,
				loading: false,
				svcObjIdPropertyMap: [],
				originalEquipmentList: [],
				equipmentList: [],
				newEquipmentList: [],
				equipmentIdList: [],
				showPop: false,
				equipmentInfo: {},
				nowEquipmentName: '',
			}
		},
		props: {
			showFlag: {
				type: Boolean,
				default: () => false
			},
			serviceBeginTime: {
				type: String,
				default: () => ''
			},
			serviceEndTime: {
				type: String,
				default: () => ''
			}
		},
		created() {
			if(this.showFlag) {
				this.svcClassId = uni.getStorageSync('svcClassId')
				this.serviceProjectNo = uni.getStorageSync('serviceProjectNo')
				this.getMachineryList()
				this.getMachineryTypeList()
				uni.$on('timeChange',()=>{
					this.getMachineryList()
				})
			}
		},
		destroyed() {
			uni.$off('timeChange')
		},
		methods: {
			// 农机类型
			async getMachineryTypeList() {
				let res = await API.queryMachineryType(uni.getStorageSync('organizationNo'))
				if (res.code === 200) {
					this.tabList = res.data
					if(this.tabList.length>0) {
						this.selectItem()
					}
				}
			},
			// 全部农机
			async getMachineryList() {
				if (this.loading) return
				this.loading = true
				let {
					serviceBeginTime,
					serviceEndTime,
					svcClassId,
					serviceProjectNo
				} = this
				let params = {
					serviceBeginTime,
					serviceEndTime,
					// svcClassId,
					serviceProjectNo,
					richEntity: true,
					shelfStatus: 0
				}
				let res = await API.queryMachinery(params)
				if (res.code === 200) {
					this.equipmentList = []
					this.originalEquipmentList = res.data
					this.originalEquipmentList.forEach(el => {
						let params = {}
						console.log(el);
						el.serviceProperties.forEach(item => {
							if(item.expression === 'deviceType') {
								params['equipmentTypeId'] = item.textValue
								params['svcObjId'] = item.svcObjId
								params['deviceTypeName'] = el.deviceTypeName
								
							}
							if(item.expression === 'orderObjName') {
								params['equipmentName'] = item.textValue
							}
							if(item.expression === 'unitPrice') {
								params['unitPrice'] = item.numValue
							}
							if(item.expression === 'leaseDayNum') {
								params['leaseDayNum'] = (item.numValue*1).toFixed(0)
							}
							if(item.expression === 'station') {//省市区
								params['station'] = item.textValue
							}
							if(item.expression === 'serviceName') {
								params['serviceName'] = item.textValue
							}
							if(item.expression === 'servicePhone') {
								params['servicePhone'] = item.textValue
							}
							if(item.expression === 'stationInfo') {
								params['stationInfo'] = item.textValue
							}
							if(item.expression === 'relateDevice') {
								params['relateDevice'] = item.textValue
							}
						})
						this.equipmentList.push(params)
					})
					if(this.equipmentList.length>0) {
						this.selectItem()
					}
					this.loading = false
				} else {
					this.loading = true
				}
			},
			// 左侧tab
			selectItem(e) {
				if(this.equipmentList.length > 0 && this.tabList.length > 0) {
					if (e) {
						this.activeId = e
					} else {
						this.activeId = this.tabList[0].id
					}
					this.newEquipmentList = this.equipmentList.filter(el => el.equipmentTypeId === `${this.activeId}`)
				}
			},
			goOrder(item) {
				let num = new Date(uni.getStorageSync('datetimerange')[1]) - new Date(uni.getStorageSync('datetimerange')[0])
				let day = (num/24/60/60/1000)
				let expectPrice = (day*item.unitPrice).toFixed(2)
				uni.reLaunch({
					url: `/subPage1/socialized-service/farm-service/order/order?id=${item.relateDevice}&name=${item.equipmentName}&svcObjId=${item.svcObjId}&expectPrice=${expectPrice}&day=${day}`
				})
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				let newheight = topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			async handleScrolltolowerone() {
				if (this.loading) return;
				// console.log('触底');
				if (this.page <= this.totalPages && this.page * 10 < this.total) {
					this.page++
					this.getServiceOrganization()
				}
			},
			// pop
			goInfo(item) {
				this.equipmentInfo = {
					...item
				}
				console.log(item);
				this.nowEquipmentName = item.equipmentName
				this.showPop = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: space-between;
		width: 100%;
		
		.left {
			width: 31%;
			

			.tab {
				height: 100%;
				font-size: 28rpx;
				
				.item {
					padding: 40rpx 0;
					text-align: center;
				}

				.activeItem {
					color: #0480FB;
					border-left: 4rpx solid #0480FB;
					background-color: white;
					box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.05);
					
				}
			}
		}

		.right {
			width: 69%;
			background-color: white;
			.item {
				border: 2rpx solid #ccc;
				padding: 20rpx;
				margin: 20rpx;
				border-radius: 5px 5px 5px 5px;

				.top {
					display: flex;
					border-bottom: 2rpx solid #ccc;
					align-items: center;

					.img {
						height: 100rpx;

						image {
							height: 100rpx;
							width: 100rpx;
						}
					}

					.describle {
						padding-left: 20rpx;
						
						.name{
							font-size: 14px;
							color: #0480FB;
							margin-bottom: 10px;
						}
						.day{
							margin-bottom: 5px;
						}
					}
				}

				.bottom {
					padding-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.info {
						display: flex;
						 align-items: center; 
					}

					.day {
						color: #e0001b;
					}
				}
			}
		}
	}

	// pop
	.popUpOperate {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		border-bottom: 1px solid #ccc;

		.left,
		.right {
			color: #0079fe;
		}

		.center {
			font-weight: 700;
		}
	}

	.popTop {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		.first {
			display: flex;
			flex-wrap: wrap;

			.popItemTop {
				width: 32%;
				height: 160rpx;
				margin-right: calc(4% / 2);
				margin-bottom: 20rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tip {
			color: #d9001b;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}
	}
	
	.gray {
		height: 20rpx;
		width: 100%;
		background-color: #ccc;
	}
	.popBottom {
		padding: 20rpx;
		.title {
			font-weight: 700;
			font-size: 32rpx;
		}
		.info {
			margin: 10rpx;
		}
	}
</style>